<template>
  <div class="app-container">

    <div class="app-container__section">
      <PlusSearch
        v-bind="searchBinds"
        :columns="columns"
        v-model="gSearchForm"
      />
    </div>
    <div class="app-container__section">
      <PlusTable
        v-bind="tableBinds"
        :columns="columns"
      >
        <template #title>
          <table-title />
        </template>
        <template #toolbar>
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="gSelection.length === 0"
                @click="handleDelete(gSelection)"
                v-hasPermi="['monitor:operlog:remove']"
              >删除</el-button
              >
              <el-button
                type="danger"
                plain
                icon="Delete"
                @click="handleClean"
                v-hasPermi="['monitor:operlog:remove']"
              >清空</el-button
              >
              <el-button
                type="warning"
                plain
                icon="Download"
                @click="handleExport"
                v-hasPermi="['monitor:operlog:export']"
              >导出</el-button
              >
          <ClockTimer :task="gGetList" />
          <SearchAreaControl v-model="gShowSearchForm" />
        </template>
        <template #plus-cell-businessType="scope">
          <dict-tag :options="dictData.sys_oper_type" :value="scope.row.businessType" />
        </template>
        <template #plus-cell-action="scope">
          <el-tooltip effect="dark" content="详情" placement="top">
            <el-button
              link
              type="primary"
              icon="View"
              @click="handleView(scope.row, scope.index)"
              v-hasPermi="['monitor:operlog:query']"
            >详细</el-button >
          </el-tooltip>
        </template>
      </PlusTable>
    </div>

    <!-- 操作日志详细 -->
    <el-dialog title="操作日志详细" v-model="open" width="700px" append-to-body>
      <el-form :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作模块："
              >{{ form.title }} / {{ typeFormat(form) }}</el-form-item
            >
            <el-form-item label="登录信息："
              >{{ form.operName }} / {{ form.operIp }} /
              {{ form.operLocation }}</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
            <el-form-item label="请求方式：">{{
              form.requestMethod
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返回参数：">{{
              form.jsonResult
            }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作状态：">
              <div v-if="form.status === 0">正常</div>
              <div v-else-if="form.status === 1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消耗时间："
              >{{ form.costTime }}毫秒</el-form-item
            >
          </el-col>
          <el-col :span="10">
            <el-form-item label="操作时间：">{{
              parseTime(form.operTime)
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息：" v-if="form.status === 1">{{
              form.errorMsg
            }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {  cleanOperlog } from '@/api/monitor/operlog';
import { PlusSearch, PlusTable } from 'plus-pro-components'
import { useColumnsDict, useCommonConfig } from './hook.js'
import { useListHook,useDelHook  } from '@/hooks/crud/index.js'
import { useListConfigHook } from '@/hooks/usePlusConfigHook.js'
import { formatRangeTime } from '@/utils/index.js'
defineOptions({
  name:'Operlog'
})
const { proxy,apiFn,primaryKey,moduleName,beforeDelFn } = useCommonConfig()
const { dictData, columns, } = useColumnsDict()

// ====================列表逻辑=========================
const gSearchForm = ref({  })
const { gGetList, gAllExposeOption } = useListHook({
  listApiFn:apiFn.listApiFn,
  gSearchForm,
  beforeRequest: (reqData) => {
    let { operTime, ...rest } = reqData;
    let timeRange = formatRangeTime(operTime,undefined,'YYYY-MM-DD')
    return {
      ...rest,
      params:timeRange
    }
  },
  afterRequest: (resData) => {
    return resData
  }
})
// ====================属性绑定=========================
const { gTableBinds, gSearchBinds, gSelection, gShowSearchForm } = useListConfigHook()
const tableBinds = computed(() => gTableBinds({ ...gAllExposeOption,primaryKey }))
const searchBinds = computed(() => gSearchBinds({ ...gAllExposeOption } ))
// ==================删除逻辑===========================
const { gDelete } = useDelHook({
  delApiFn:apiFn.delApiFn,
  moduleName,
  beforeDelFn: (reqData) => beforeDelFn(reqData) ,
  afterDelFn: (resData) => {
    gGetList()
  }
})
const handleDelete = (data)=>{
  gDelete(data)
}
// ===================查看======================

const open = ref(false);
const data = reactive({
  form: {},
});
const {  form } = toRefs(data);

/** 操作日志类型字典翻译 */
function typeFormat(row, column) {
  return proxy.selectDictLabel(dictData.value.sys_oper_type, row.businessType);
}

/** 排序触发事件 */
function handleSortChange(column, prop, order) {
  gSearchForm.value.orderByColumn = column.prop;
  gSearchForm.value.isAsc = column.order;
  gGetList();
}
/** 详细按钮操作 */
function handleView(row) {
  open.value = true;
  form.value = row;
}

/** 清空按钮操作 */
async function handleClean() {
  await  proxy.$modal.confirm('是否确认清空所有操作日志数据项?')
  await cleanOperlog();
  setTimeout(async ()=>{
    await gGetList();
  },500)
  proxy.$modal.msgSuccess('清空成功');
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    'monitor/operlog/export',
    {
      ...gSearchForm.value,
    },
    `operlog_${new Date().getTime()}.xlsx`
  );
}
</script>
